﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestTree.aspx.cs" Inherits="TestTree" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Tree</title>
    <script type="text/javascript" language="JavaScript" src="<%=Page.ResolveUrl("~/Admin/Scripts/jquery-1.9.1.js")%>"></script>
    <link rel="stylesheet" href="<%=Page.ResolveUrl("~/Admin/Plugins/jstree/themes/default/style.min.css")%>" type="text/css" media="screen" />
    <script type="text/javascript" src="<%=Page.ResolveUrl("~/Admin/Plugins/jstree/jstree.min.js")%>"></script>
        <script type="text/javascript">

            $(document).ready(function () {
                $('#jstree_demo_div').jstree({
                    'plugins': ["dnd", "contextmenu"],
                    "core": {
                        "check_callback": true
                    }
                });
                console.log('ready:');
            });

            $('#jstree_demo_div').on("changed.jstree", function (e, data) {
                console.log(data.selected);
            });

            $("#jstree_demo_div").on("before.jstree", function (e, data) {
                console.log('data.func: ' + data.func);
//                if (data.func === "remove" && !confirm("Are you sure you want to delete?")) {
//                    e.stopImmediatePropagation();
//                    return false;
//                }
            });

            $('button').on('click', function () {
                $('#jstree').jstree(true).select_node('child_node_1');
                $('#jstree').jstree('select_node', 'child_node_1');
                $.jstree.reference('#jstree').select_node('child_node_1');
            });


    </script>
</head>
<body>
   
        <h1>
        Manage Flow Categories</h1>
    <div class="container">
        <div id="jstree_demo_div" class="demo">
            <ul>
                <li>Root node 1
                    <ul>
                        <li data-jstree='{ "selected" : true }'><a href="#"><em>initially</em> <strong>selected</strong></a></li>
                        <li data-jstree='{ "icon" : "http://jstree.com/tree-icon.png" }'>custom icon URL</li>
                        <li data-jstree='{ "opened" : true }'>initially open
                            <ul>
                                <li>Another node</li>
                            </ul>
                        </li>
                        <li data-jstree='{ "icon" : "glyphicon glyphicon-leaf" }'>Custom icon class (bootstrap)</li>
                    </ul>
                </li>
                <li><a href="http://www.jstree.com">Root node 2</a></li>
            </ul>
        </div>
    </div>
    
</body>
</html>
